<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="keywords" content="html5,jquery,ui,widgets,ajax,ria,web framekwork,web development,easy,easyui,datagrid,treegrid,tree">
		<meta name="description" content="jQuery EasyUI is a complete framework for HTML5 web page. It provides easy to use components for building modern, interactive, javascript applications that work on pc and mobile devices.">
		<title>textbox - Documentation - jQuery EasyUI</title>
        <link rel="stylesheet" href="/css/kube.css" type="text/css" />
        <link rel="stylesheet" type="text/css" href="../css/main.css">
		<link rel="stylesheet" type="text/css" href="../../prettify/prettify.css">
		<script type="text/javascript" src="../../prettify/prettify.js"></script>
		<script type="text/javascript" src="/easyui/jquery.min.js"></script>
		<script type="text/javascript">
			$(function(){
								$('textarea[name="code-textbox"]').each(function(){
					var data = $(this).val();
					data = data.replace(/(\r\n|\r|\n)/g, '\n');
					if (data.indexOf('\t') == 0){
						data = data.replace(/^\t/, '');
						data = data.replace(/\n\t/g, '\n');
					}
					data = data.replace(/\t/g, '    ');
					var pre = $('<pre name="code" class="prettyprint linenums"></pre>').insertAfter(this);
					pre.text(data);
					$(this).remove();
				});
				prettyPrint();
			});
		</script>
	</head>
	<body>
		<div id="header" class="group wrap header">
			<div class="content">
	<div class="navigation-toggle" data-tools="navigation-toggle" data-target="#navbar-1">
		<span>EasyUI</span>
	</div>
	<div id="elogo" class="navbar navbar-left">
		<ul>
			<li>
				<a href="/index.php"><img src="/images/logo2.png" alt="jQuery EasyUI"/></a>
			</li>
		</ul>
	</div>
	<div id="navbar-1" class="navbar navbar-right">
		<ul>
			<li><a href="/index.php">Home</a></li>
			<li><a href="/demo/main/index.php">Demo</a></li>
			<li><a href="/tutorial/index.php">Tutorial</a></li>
			<li><a href="/documentation/index.php">Documentation</a></li>
			<li><a href="/download/index.php">Download</a></li>
			<li><a href="/extension/index.php">Extension</a></li>
			<li><a href="/contact.php">Contact</a></li>
			<li><a href="/forum/index.php">Forum</a></li>
		</ul>
	</div>
	<div style="clear:both"></div>
</div>
<script type="text/javascript">
	function setNav(){
		var demosubmenu = $('#demo-submenu');
		if (demosubmenu.length){
			if ($(window).width() < 450){
				demosubmenu.find('a:last').hide();
			} else {
				demosubmenu.find('a:last').show();
			}
		}
		if ($(window).width() < 767){
			$('.navigation-toggle').each(function(){
				$(this).show();
				var target = $(this).attr('data-target');
				$(target).hide();
				setDemoNav();
			});
		} else {
			$('.navigation-toggle').each(function(){
				$(this).hide();
				var target = $(this).attr('data-target');
				$(target).show();
			});
		}
	}
	function setDemoNav(){
		$('.navigation-toggle').each(function(){
			var target = $(this).attr('data-target');
			if (target == '#navbar-demo'){
				if ($(target).is(':visible')){
					$(this).css('margin-bottom', 0);
				} else {
					$(this).css('margin-bottom', '2.3em');
				}
			}
		});
	}
	$(function(){
		setNav();
		$(window).bind('resize', function(){
			setNav();
		});
		$('.navigation-toggle').bind('click', function(){
			var target = $(this).attr('data-target');
			$(target).toggle();
			setDemoNav();
		});
	})
</script>		</div>
		<div id="mainwrap">
			<div id="content" class="content">
			

<div style="padding:10px">

<h3>TextBox</h3>
<p>Extend from $.fn.validatebox.defaults. Override defaults with $.fn.textbox.defaults.</p>
<p>
The TextBox component is a enhanced input field that allows users build their form easily.
It is the base component for building other complex components such as combo,datebox,spinner,etc.
</p>
<img src="images/textbox.png"/>

<h4>Dependencies</h4>
<ul>
	<li>validatebox</li>
	<li>linkbutton</li>
</ul>

<h4>Usage Example</h4>
<p>Create textbox from markup.</p>
<textarea name="code-textbox" class="html">
	<input class="easyui-textbox" data-options="iconCls:'icon-search'" style="width:300px">
</textarea>
<p>Create textbox by using javascript.</p>
<textarea name="code-textbox" class="html">
	<input id="tb" type="text" style="width:300px">
</textarea>
<textarea name="code-textbox" class="js">
	$('#tb').textbox({
		buttonText:'Search',
		iconCls:'icon-man',
		iconAlign:'left'
	})
</textarea>

<h4>Properties</h4>
<p>The properties extend from validatebox, below is the added properties for textbox:</p>
<table class="doc-table">
<tr>
<th><strong>Name</strong></th>
<th><strong>Type</strong></th>
<th><strong>Description</strong></th>
<th><strong>Default</strong></th>
</tr>
<tr>
<td>width</td>
<td>number</td>
<td>The width of the component.</td>
<td>auto</td>
</tr>
<tr>
<td>height</td>
<td>number</td>
<td>The height of the component.</td>
<td>auto</td>
</tr>
<tr>
<td>cls</td>
<td>string</td>
<td>Add a CSS class to the textbox. Available since version 1.5.1.</td>
<td></td>
</tr>

<tr>
<td>prompt</td>
<td>string</td>
<td>The prompt message to be displayed in input box.</td>
<td>''</td>
</tr>
<tr>
<td>value</td>
<td>string</td>
<td>The default value.</td>
<td></td>
</tr>
<tr>
<td>type</td>
<td>string</td>
<td>The textbox type. Possible values are 'text' and 'password'.</td>
<td>text</td>
</tr>
<tr>
<td>label</td>
<td>string,selector</td>
<td>
The label bound to textbox. Available since version 1.5.
<p>Code example:</p>
<pre>
$('#t1').textbox({
	width: 300,
	label: 'Name:'
});
$('#t2').textbox({
	width: 300,
	label: $('#label2')
});
</pre>
</td>
<td>null</td>
</tr>
<tr>
<td>labelWidth</td>
<td>number</td>
<td>The label width. Available since version 1.5.</td>
<td>auto</td>
</tr>
<tr>
<td>labelPosition</td>
<td>string</td>
<td>The label position. Possible values are:'before','after','top'. Available since version 1.5.</td>
<td>before</td>
</tr>
<tr>
<td>labelAlign</td>
<td>string</td>
<td>The label alignment. Possible values are:'left','right'. Available since version 1.5.</td>
<td>left</td>
</tr>
<tr>
<td>multiline</td>
<td>boolean</td>
<td>Defines if this is a multiline textbox.</td>
<td>false</td>
</tr>
<tr>
<td>editable</td>
<td>boolean</td>
<td>Defines if the user can type text directly into the field.</td>
<td>true</td>
</tr>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>Defines if to disable the field.</td>
<td>false</td>
</tr>
<tr>
<td>readonly</td>
<td>boolean</td>
<td>Defines if the component is read-only.</td>
<td>false</td>
</tr>
<tr>
<td>icons</td>
<td>array</td>
<td>
The icons attached to the textbox. Each item has the following properties:<br>
iconCls: string, the icon class.<br>
disabled: boolean, indicate if the icon is disabled.<br>
handler: function, the function to process the clicking action on this icon.
<p>Code example:</p>
<pre>
$('#tb').textbox({
	icons: [{
		iconCls:'icon-add',
		handler: function(e){
			$(e.data.target).textbox('setValue', 'Something added!');
		}
	},{
		iconCls:'icon-remove',
		handler: function(e){
			$(e.data.target).textbox('clear');
		}
	}]
})
</pre>
</td>
<td>[]</td>
</tr>
<tr>
<td>iconCls</td>
<td>string</td>
<td>The background icon displayed on the textbox.</td>
<td>null</td>
</tr>
<tr>
<td>iconAlign</td>
<td>string</td>
<td>Position of the icons. Possible values are 'left','right'.</td>
<td>right</td>
</tr>
<tr>
<td>iconWidth</td>
<td>number</td>
<td>The icon width.</td>
<td>18</td>
</tr>
<tr>
<td>buttonText</td>
<td>string</td>
<td>The displaying text of button that attached to the textbox.</td>
<td></td>
</tr>
<tr>
<td>buttonIcon</td>
<td>string</td>
<td>The displaying icon of button that attached to the textbox.</td>
<td>null</td>
</tr>
<tr>
<td>buttonAlign</td>
<td>string</td>
<td>Position of the button. Possible values are 'left','right'.</td>
<td>right</td>
</tr>
</table>

<h4>Events</h4>
<p>The events extend from validatebox, below is the added events for textbox.</p>
<table class="doc-table">
<tr>
<th><strong>Name</strong></th>
<th><strong>Parameters</strong></th>
<th><strong>Description</strong></th>
</tr>
<tr>
<td>onChange</td>
<td>newValue,oldValue</td>
<td>Fires when the field value is changed.</td>
</tr>
<tr>
<td>onResize</td>
<td>width,height</td>
<td>Fires when the textbox is resized.</td>
</tr>
<tr>
<td>onClickButton</td>
<td>none</td>
<td>Fires when the user click the button.</td>
</tr>
<tr>
<td>onClickIcon</td>
<td>index</td>
<td>Fires when the user click a icon.</td>
</tr>
</table>

<h4>Methods</h4>
<p>The methods extend from validatebox, below is the added methods for textbox.</p>
<table class="doc-table">
<tr>
<th><strong>Name</strong></th>
<th><strong>Parameter</strong></th>
<th><strong>Description</strong></th>
</tr>
<tr>
<td>options</td>
<td>none</td>
<td>Return the options object.</td>
</tr>
<tr>
<td>textbox</td>
<td>none</td>
<td>
Return the textbox object. The user can bind any events to this editing box.
<p>Code example:</p>
<pre>
var t = $('#tt');
t.textbox('textbox').bind('keydown', function(e){
	if (e.keyCode == 13){	// when press ENTER key, accept the inputed value.
		t.textbox('setValue', $(this).val());
	}
});
</pre>
</td>
</tr>
<tr>
<td>button</td>
<td>none</td>
<td>Return the button object.</td>
</tr>
<tr>
<td>destroy</td>
<td>none</td>
<td>Destroy the textbox component.</td>
</tr>
<tr>
<td>resize</td>
<td>width</td>
<td>Resize the component width.</td>
</tr>
<tr>
<td>disable</td>
<td>none</td>
<td>Disable the component.</td>
</tr>
<tr>
<td>enable</td>
<td>none</td>
<td>Enable the component.</td>
</tr>
<tr>
<td>readonly</td>
<td>mode</td>
<td>
Enable/Disable readonly mode.
<p>Code example:</p>
<pre>
$('#tb').textbox('readonly');	// enable readonly mode
$('#tb').textbox('readonly',true);	// enable readonly mode
$('#tb').textbox('readonly',false);	// disable readonly mode
</pre>
</td>
</tr>
<tr>
<td>clear</td>
<td>none</td>
<td>Clear the component value.</td>
</tr>
<tr>
<td>reset</td>
<td>none</td>
<td>Reset the component value.</td>
</tr>
<tr>
<td>initValue</td>
<td>value</td>
<td>Initialize the component value. Calling this method does not trigger the 'onChange' event.</td>
</tr>
<tr>
<td>setText</td>
<td>text</td>
<td>Set the displaying text value.</td>
</tr>
<tr>
<td>getText</td>
<td>none</td>
<td>Get the displaying text value.</td>
</tr>
<tr>
<td>setValue</td>
<td>value</td>
<td>Set the component value.</td>
</tr>
<tr>
<td>getValue</td>
<td>none</td>
<td>Get the component value.</td>
</tr>
<tr>
<td>getIcon</td>
<td>index</td>
<td>Get specified icon object.</td>
</tr>
</table>


﻿			</div>
		</div>
		<div id="footer" class="content text-centered">
			<div>Copyright © 2010-2017 www.jeasyui.com</div>
		</div>
	</body>
</html>